import CheckDetail, { cardListData } from "./components/CheckDetail";
import CheckConfig from "./components/CheckConfig";
import { drawerConfig, drawerVisible } from "./drawer";
import { modalConfig, modalTitle, modalVisible } from "./modal";
import { searchConfig } from "./search";
import { tableActiveKey } from "./store";
import { tableConfig, tableData, tableLoading, tablePage } from "./table";
import tradeStyles from "@views/trade/detail/index.module.less";
import checkStyles from "./index.module.less";
import imageUrl from "@img/JiqGstEfoWAOHiTxclqi.png";
export const tmp_imageUrl = imageUrl;
export const videoUrl =
  "https://1321411882.vod-qcloud.com/0e1d195fvodtranssgp1321411882/686f8a7f1397757885728329438/v.f100010.mp4";
export const queryParams = reactive<any>({});
export const fetchCardList = async () => {
  try {
    cardListData.length = 0;
    queryParams.page = tablePage.current;
    queryParams.page_size = tablePage.pageSize;
    queryParams.status = queryParams.status ? queryParams.status : 0;
    // await handleApiTask(tableActiveKey.value);
    const res = await new Promise((resolve, reject) => {
      setTimeout(() => {
        for (let i = 0; i <= 9; i++) {
          const index = i + 1 + (tablePage.current - 1) * tablePage.pageSize;
          const record = {
            index,
            status: queryParams.status,
            checked: false,
            aaaa: "2024/03/01",
            bbbb: "2024/03/02",
            cccc: "图片" + i + "涉黄",
            imageUrl: [0, 1].includes(queryParams.status) ? imageUrl : "",
            videoUrl: [0, 2].includes(queryParams.status) ? videoUrl : "",
          };
          if (queryParams.status === 0) cardListData.push(record);
          if (queryParams.status === 1 && index % 2 === 1) {
            const index = record.index / 2 + 0.5;
            cardListData.push({ ...record, index });
          }
          if (queryParams.status === 2 && index % 2 === 0) {
            const index = record.index / 2;
            cardListData.push({ ...record, index });
          }
        }
        resolve(cardListData);
      }, 300);
    });
  } catch (error: any) {
    message.error(error.message);
  }
};
export const refreshTable = async (searchParams = {}) => {
  tablePage.current = 1;
  initObjAttr(queryParams, searchParams);
  await fetchCardList();
};
export const defaultTabsOptions = reactive([
  [
    {
      label: "全部",
      value: 0,
    },
    {
      label: "图片",
      value: 1,
    },
    {
      label: "视频",
      value: 2,
    },
  ],
  [],
]);
export const defaultTabsActiveKey = reactive<any>([0, 0]);
export const showModal = () => (modalVisible.value = true);
export const batchValue = ref();
export const checkedAll = ref(false);
export default defineComponent({
  setup(props, { attrs, emit, expose, slots }) {
    onActivated(() => fetchCardList());
    const defineSearch = searchConfig();
    const defineModal = modalConfig();
    const defineDrawer = drawerConfig();
    return () => (
      <>
        <s-search {...defineSearch} />
        {defaultTabsOptions[tableActiveKey.value].length ? (
          <div class={["mt16 mb8", checkStyles.operate_wrapper]}>
            <div class={checkStyles.button_wrapper}>
              {defaultTabsOptions[tableActiveKey.value].map(
                ({ label, value }: any, index: number) => (
                  <s-button
                    class={[
                      tradeStyles["tabs-button"],
                      defaultTabsActiveKey[tableActiveKey.value] === index
                        ? tradeStyles.active
                        : "",
                    ]}
                    onClick={() => {
                      defaultTabsActiveKey[tableActiveKey.value] = value;
                      queryParams.status = value;
                      refreshTable(deepClone(queryParams));
                    }}
                  >
                    {label}
                  </s-button>
                )
              )}
            </div>
            <div class={checkStyles.batch_operate}>
              <a-select
                v-model:value={batchValue.value}
                style="width: 120px"
                placeholder="批量操作"
                onChange={(value, option) => {
                  if (!tableData.value.length)
                    return message.warn("请先勾选批量操作项");
                  modalTitle.value = option.label;
                  showModal();
                }}
                options={[
                  {
                    label: "批量正常",
                    value: 0,
                  },
                  {
                    label: "批量违规",
                    value: 1,
                  },
                ]}
              />
            </div>
          </div>
        ) : null}
        {tableActiveKey.value === 0 ? (
          <div class={checkStyles.color_tips}>
            <i>识别场景内容颜色代表审核结果</i>
            <i class="s-ffbb00">待审核</i>
            <i class="s-dd0000">人审失败</i>
            <i class="s-00dd00">人审通过</i>
          </div>
        ) : null}

        {tableActiveKey.value === 0 ? (
          <div class="mt8 mb8">
            <a-checkbox
              v-model:checked={checkedAll.value}
              onChange={({ target: { checked } }) => {
                cardListData.forEach((item) => (item.checked = checked));
                tableData.value = cardListData.filter((item) => item.checked);
                batchValue.value = undefined;
              }}
            >
              {$t("base.checkAll")}
            </a-checkbox>
          </div>
        ) : null}
        {tableActiveKey.value === 0 ? <CheckDetail /> : <CheckConfig />}
        {modalVisible.value ? <s-modal {...defineModal} /> : null}
        {drawerVisible.value ? <s-drawer {...defineDrawer} /> : null}
      </>
    );
  },
});
